<template>
	<div class="detail-component">
		<fieldset class="fieldset">基本信息</fieldset>
		<div class="item">
			<span class="label">巡查人</span>
			<span class="value">{{detailData.checkUser}}</span>
		</div>
		<div class="item">
			<span class="label">负责人</span>
			<span class="value">{{detailData.responsible}}</span>
		</div>
		<div class="item">
			<span class="label">巡查日期</span>
			<span class="value">{{detailData.checkDateStr}}</span>
		</div>
		<div class="item">
			<span class="label">巡查地点</span>
			<span class="value">{{detailData.checkPlace}}</span>
		</div>
		<div class="item">
			<span class="label">状态</span>
			<span class="value">{{detailData.statusName}}</span>
		</div>
		<fieldset class="fieldset">图片展示</fieldset>
		<div class="item span100">
			<!-- <span class="label">图片</span> -->
			<div class="value img-list ">
				 <el-image 
					 class="img"  
					 v-for="src in detailData.picUrl" 
					 width="100px" 
					 height="100px" s
					 :src="src" 
					 fit="contain"
					 :preview-src-list="detailData.picUrl"
					 :key="src"
				 ></el-image>
			</div>
		</div>
		<fieldset class="fieldset">巡查内容</fieldset>
		<div class="item span100">
			<span class="label" v-show="false">巡查内容</span>
			<div class="value ">
				<el-table :data="detailData.checkList" stripe>
					<el-table-column  prop="inspection"  label="项目名称" ></el-table-column>
					<el-table-column  prop="description"  label="检查情况记录" ></el-table-column>
					<el-table-column  prop="opinion"  label="处理意见"></el-table-column>
				</el-table>
			</div>
		</div>
		<fieldset class="fieldset" v-if="detailData.approvePatrol && detailData.approvePatrol.length!=0">审批记录</fieldset>
		<div class="item span100" v-if="detailData.approvePatrol && detailData.approvePatrol.length!=0">
			<!-- <span class="label">审批记录</span> -->
			<div class="value">
				<el-timeline>
				    <el-timeline-item v-for="item in detailData.approvePatrol" :key="item.id"  type="primary">
					  <div class="head">
						  <span class="info name">{{item.checkuser}}</span>
						  <span class="info time">{{item.checktime}}</span>
						  <span class="info status">{{item.statusName}}</span>
						  <span class="info el-icon-picture-outline-round" v-show="item.checkpic.length>0"  :title="`点击预览(共${item.checkpic.length}张)`" @click="showImageViewer(item)"></span>
						  <!-- <el-image class="info file"  v-for="file in item.checkpic" :preview-src-list="item.checkpic" :src="file" fit="cover" :key="file">
							  <span slot="error" class=""></span>
						  </el-image> -->
					  </div>
					  <div class="content">{{item.checkdescribe}}</div>
					</el-timeline-item>
				  </el-timeline>
			</div>
		</div>
		<div class="item span100">
			<span class="label"></span>
			<div class="value btn-bar" >
				<el-button  type="success" @click="approve('tongguo')" v-if="detailData.status==0" :loading="btnLoading">通过</el-button>
				<el-button  type="primary" @click="approve('quchuli')" v-if="detailData.status==0" :loading="btnLoading">去处理</el-button>
				<el-button  type="primary" @click="approve('chuliwancheng')" v-if="detailData.status==2" :loading="btnLoading">处理完成</el-button>
				<el-button  type="primary" @click="approve('fuhewancheng')" v-if="detailData.status==3" :loading="btnLoading">复核完成</el-button>
			</div>
		</div>
		<el-dialog class="approve-dialog" title="审批" :visible.sync="showDialog" append-to-body width="350px" modal>
			<el-form :inline="false" :model="formData" ref="formData" >
			  <el-form-item label="审批意见" prop="describe">
			    <el-input  type="textarea"  v-model="formData.describe" maxlength="50" show-word-limit autosize placeholder="请输入审批意见(不超50字)"></el-input>
			  </el-form-item>
			  <el-form-item label="上传附件" prop="multipartFile">
			    <el-upload
			      class="upload-demo"
			      action=""
				  :auto-upload="false"
			      multiple
				  accept=".jpg,.jpeg,.png,.gif,.JPG,.JPEG"
				  :on-progress="onProgress"
				  :on-change="onChange"
				  :file-list="formData.multipartFile"
				  limit="9"
				  :on-exceed="alertMsg"
				  >
			      <el-button size="mini" type="primary">点击上传</el-button>
			    </el-upload>
			  </el-form-item>
			 </el-form>
			 <div slot="footer" align="center">
				 <el-button @click="onCancel">取 消</el-button>
				 <el-button type="primary" @click="onSubmit" :loading="btnLoading">确 定</el-button>
			 </div>
		</el-dialog>
		<el-image-viewer v-if="showViewer"  :url-list="imgList" :on-close="closeViewr" />
	</div>
</template>
<script>
	import detailMixin from '../detail.mixin.js'
	export default{
		mixins:[detailMixin],
		data(){
			return{
				apiFun:"infrastructure_fangwushebeiDetail",
				type:"fangwushebei",
			}
		},
	}
</script>
<style scoped="scoped" lang="scss">
	.img-list{
		margin:10px 0px;
		.img{
			width: 100px;
			height: 100px;
			margin-right: 30px;
		}
	}
	
	.btn-bar{
		margin: 20px;
		text-align: center;
	}
	
	.approve-dialog{
		/deep/ .el-dialog{
			max-height: 500px;
			.el-dialog__body{
				overflow: auto;
			}
		}
		/deep/ .el-textarea__inner{
			min-height: 100px !important;
		}
	}
	
	/deep/ .el-timeline{
		margin-top: 10px;
		margin-left: 15px;
		.info{
			margin-right: 10px;
		}
		.file{
			width:15px;
			height: 15px;
			border-radius: 50%;
		}
		.name{font-wewight:bolder;}
		.time,.status{color: #929292;}
	}
	
	
</style>
